<template>
  <!-- 出勤设置表单 -->
  <el-form ref="attendanceFormRef" :model="attendanceForm" :rules="attendanceRules" label-width="120px">
    <!-- 选择部门 -->
    <el-form-item label="请选择部门：" prop="departmentId">
      <el-cascader
        v-model="attendanceForm.departmentId"
        :options="departmentList"
        :props="{ expandTrigger: 'hover', label: 'name', value: 'id', emitPath: false }"
        separator="-"
        @change="onChangeDepartment"
        @blur.native.capture="$refs.attendanceFormRef.validateField('departmentId')"
      />
    </el-form-item>
    <el-form-item label="出勤时间：" required>
      <!-- 上午时间 -->
      <div class="morning-time">
        <el-time-select
          v-model="attendanceForm.morningStartTime"
          placeholder="上午上班时间"
          :picker-options="{
            start: '00:00',
            step: '00:05',
            end: '23:55'
          }"
        /> -
        <el-time-select
          v-model="attendanceForm.morningEndTime"
          placeholder="上午下班时间"
          :picker-options="{
            start: '00:00',
            step: '00:05',
            end: '23:55',
            minTime: attendanceForm.morningStartTime
          }"
        />
      </div>
      <!-- 下午时间 -->
      <div>
        <el-time-select
          v-model="attendanceForm.afternoonStartTime"
          placeholder="下午上班时间"
          :picker-options="{
            start: '00:00',
            step: '00:05',
            end: '23:55',
            minTime: attendanceForm.morningEndTime
          }"
        /> -
        <el-time-select
          v-model="attendanceForm.afternoonEndTime"
          placeholder="下午下班时间"
          :picker-options="{
            start: '00:00',
            step: '00:05',
            end: '23:55',
            minTime: attendanceForm.afternoonStartTime
          }"
        />
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import { getDepartmentListAPI } from '@/api/department'
import { transListToTreeData } from '@/utils'
import { getAttendanceSettingAPI, updateAttendanceSettingAPI } from '@/api/attendance'

const defaultFormData = {
  departmentId: 2, // 当前选中的部门id
  morningStartTime: '', // 上午上班时间
  morningEndTime: '', // 上午下班时间
  afternoonStartTime: '', // 下午上班时间
  afternoonEndTime: '' // 下午下班时间
}

export default {
  name: 'AttendanceConfig',
  data() {
    return {
      departmentList: [], // 部门列表
      // 出勤设置表单数据
      attendanceForm: { ...defaultFormData },
      // 出勤设置表单校验规则
      attendanceRules: {
        departmentId: [
          { required: true, message: '请选择部门', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  async created() {
    // 获取部门列表
    await this.getDepartmentList()
    await this.onChangeDepartment()
  },
  methods: {
    // 获取部门列表
    async getDepartmentList() {
      const list = await getDepartmentListAPI()
      this.departmentList = transListToTreeData(list, 0)
    },
    // 修改了选中的部门
    async onChangeDepartment() {
      this.attendanceForm = await getAttendanceSettingAPI(this.attendanceForm.departmentId)
    },
    // 保存出勤设置
    async saveAttendanceSetting() {
      // 校验表单
      this.$refs.attendanceFormRef.validate(async valid => {
        if (!valid) return
        // 提交表单
        await updateAttendanceSettingAPI(this.attendanceForm)
        // 提示保存成功
        this.$message.success('出勤设置保存成功')
        // 关闭弹窗
        this.$emit('close')
      })
    },
    // 重置表单数据
    resetFormData() {
      this.attendanceForm = { ...defaultFormData }
    }
  }
}
</script>

<style lang="scss" scoped>
.morning-time {
  margin-bottom: 10px;
}
</style>
